<template>
    <h2>物资统计</h2>
    <p>
        创建人：
        <el-input v-model="info.sMCargoName" style="width: 240px" placeholder="货物名称" />
        材质：
        <el-select v-model="info.sMMateriaLquality" clearable placeholder="Select" style="width: 240px">
            <el-option :value="0" label="请选择" />
            <el-option v-for="item in MateriaLquality" :key="item.mmteriaLqualityID" :label="item.materiaLqualityName"
                :value="item.mmteriaLqualityID" />
        </el-select>
        产地——国家：
        <el-select v-model="info.sMNationID" clearable placeholder="Select" style="width: 240px"
            @change="Provincelist()">
            <el-option :value="0" label="请选择" />
            <el-option v-for="item in Nation" :key="item.nationID" :label="item.nationName" :value="item.nationID" />
        </el-select>
        产地——省：
        <el-select v-model="info.sMProvinceID" clearable placeholder="Select" style="width: 240px">
            <el-option :value="0" label="请选择" />
            <el-option v-for="item in Provincel" :key="item.provinceID" :label="item.provinceName"
                :value="item.provinceID" />
        </el-select>
        创建时间：
        <el-date-picker v-model="info.KDate" type="date" placeholder="请选择日期" format="YYYY/MM/DD"
            value-format="YYYY-MM-DD" />至
        <el-date-picker v-model="info.JDate" type="date" placeholder="请选择日期" format="YYYY/MM/DD"
            value-format="YYYY-MM-DD" />
        <el-button type="primary" @click="StatisticsList()">查询</el-button>
        <el-button @click="chengzhi()">重置</el-button>
    </p>
    <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="cargoName" label="货物名称" />
        <el-table-column prop="typeName" label="类型">
            <template v-slot="script">
                {{ script.row.typeName }}
            </template>
        </el-table-column>
        <el-table-column prop="materiaLqualityName" label="材质">
            <template v-slot="script">
                {{ script.row.materiaLqualityName }}
            </template>
        </el-table-column>
        <el-table-column prop="gaugeLattice" label="规格" />
        <el-table-column prop="date" label="产地">
            <template v-slot="script">
                {{ script.row.nationName }}-{{ script.row.provinceName }}
            </template>
        </el-table-column>
        <el-table-column prop="sPQuantity" label="期间采购数量" />
        <el-table-column prop="sIPQuantity" label="期间领用数量" />
        <el-table-column prop="sMQuantity" label="期末结余数量" />
    </el-table>
    <table>
        <thead></thead>
        <tbody>
            <tr>
                <td>
                    <el-pagination v-model:current-page="page.pageiden" v-model:page-size="page.pageSzen"
                        :page-sizes="[3, 10, 20, 30, 40]" :background="true" layout="total,slot, sizes"
                        :total="page.totaCount" prev-text="上一页" next-text="下一页">
                        <template v-slot="script">
                            ,每页显示{{ page.pageSzen }},共{{ page.pageiden }}/{{ page.pageCount }}页
                        </template>
                    </el-pagination>
                </td>
                <td>
                    <el-pagination v-model:current-page="page.pageiden" v-model:page-size="page.pageSzen"
                        :page-sizes="[3, 10, 20, 30, 40]" :background="true" layout="slot, prev, pager, next"
                        :total="page.totaCount" prev-text="上一页" next-text="下一页">
                        <template v-slot="script">
                            <button :disabled="page.pageiden == 1" @click="page.pageiden = 1">首页</button>
                        </template>
                    </el-pagination>
                </td>
                <td>
                    <el-pagination v-model:current-page="page.pageiden" v-model:page-size="page.pageSzen"
                        :page-sizes="[3, 10, 20, 30, 40]" :background="true" layout="slot,jumper"
                        :total="page.totaCount" prev-text="上一页" next-text="下一页">
                        <template v-slot="script">
                            <button :disabled="page.pageiden == page.pageCount"
                                @click="page.pageiden = page.pageCount">尾页</button>
                        </template>
                    </el-pagination>
                </td>
            </tr>
        </tbody>
    </table>

</template>

<script setup lang='ts'>
import { reactive, ref, onMounted, watch } from 'vue'
import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
const router = useRouter()
//显示列表
const tableData = ref([])
//生命函数钩
onMounted(() => {
    //物资统计显示
    StatisticsList()
    //显示材 质
    MateriaLqualitylist();
    //显示产 地：国家
    Nationlist();
})
//条件
const info = reactive({
    sMCargoName: "",//货物名称
    sMMateriaLquality: 0,//材 质
    sMNationID: 0,//产 地：国家
    sMProvinceID: 0,//产 地：省
    KDate: "",//开始时间
    JDate: ""//结束时间
})
//条件重置
const chengzhi = () => {
    info.sMCargoName = "";//货物名称
    info.sMMateriaLquality = 0;//材 质
    info.sMNationID = 0;//产 地：国家
    info.sMProvinceID = 0;//产 地：省
    info.KDate = "";//创建人
    info.JDate = "";//审批状态
    page.pageiden = 1;//页码
    page.pageSzen = 3;//页容量
    StatisticsList()
}
//分页
const page = reactive({
    pageiden: 1,//页码
    pageSzen: 3,//页容量
    totaCount: 0,//总数据
    pageCount: 0//总页码
})
//执行分页
watch(page, () => {
    StatisticsList()
})
//显示材 质
const MateriaLquality = ref([])
const MateriaLqualitylist = () => {
    axios.get("MaterialRead/api/Public/MateriaLqualitylist").then(res => {
        MateriaLquality.value = res.data.data;
    }).catch(err => {
        console.log(err)
    })
}
//显示产 地：国家
const Nation = ref([])
const Nationlist = () => {
    axios.get("MaterialRead/api/Public/Nationlist").then(res => {
        Nation.value = res.data.data;
    }).catch(err => {
        console.log(err)
    })
}
//显示产 地：省
const Provincel = ref([])
const Provincelist = () => {
    axios.get("MaterialRead/api/Public/Provincelist?nationID=" + info.sMNationID).then(res => {
        Provincel.value = res.data.data;
    }).catch(err => {
        console.log(err)
    })
}

//物资采购显示
const StatisticsList = () => {
    axios.get("MaterialRead/api/Statistics/StatisticsList", {
        params: {
            pageiden: page.pageiden,
            pageSzen: page.pageSzen,
            sMCargoName: info.sMCargoName,
            sMMateriaLquality: info.sMMateriaLquality,
            sMNationID: info.sMNationID,
            sMProvinceID: info.sMProvinceID,
            KDate: info.KDate,
            sPApprovalStatus: info.JDate,
        }
    }).then(res => {
        page.totaCount = res.data.data.totaCount;
        page.pageCount = res.data.data.pageCount;
        tableData.value = res.data.data.values;
    }).catch(err => {
        console.log(err)
    })
}



</script>

<style></style>